<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="账户结算" @clickLeft="goback"></uni-nav-bar>
		<view class="block_top">
			<image class="abs" src="/static/ubcg.png" mode=""></image>
			<view class="t1_flex">
				<view class="">
					<view class="t1">
						可提现金额(元)
					</view>
					<view class="t2">
						{{money1}}
					</view>
				</view>
				<view class="btn" @click="gotxian">
					提现
				</view>
			</view>
			<view class="t3">
				在途金额(元) <span>{{money3}}</span>
			</view>
		</view>
		<view class="block_sticky" :style="{top: safeTop}">
			<view class="flex_b">
				<uni-datetime-picker @change='datechange' :clear-icon='false' v-model="datetimerange" type="daterange" rangeSeparator="至" />
				<view class="btn" @click="openpop">
					数据汇总
				</view>
			</view>
			<view class="price">
				<span>结算￥{{dataInfo.amount_separate}}</span>
				<span style="margin-left: 30rpx;">交易￥{{dataInfo.amount_order}}</span>
			</view>
		</view>
		<view class="ulist">
			<view class="item" v-for="(item,index) in List" :key="index" @click="pagedetail(item)">
				<image src="/static/q.png" mode=""></image>
				<view class="" style="flex: 1;margin-left: 20rpx;">
					<view class="flex_z">
						<view class="t1">订单编号：{{item.orderNumber}}</view>
					</view>
					<view class="flex_z">
						<view class="t2">{{item.createTime}}</view>
						<view class="tt" :style="{color:item.separate == '0'?'#D1D1D6':'#CE7034'}">结算：<span
								:style="{color:item.separate == '0'?'#D1D1D6':'#CE7034'}">￥{{item.amountSeparateShop + item.accountAmount}}</span>
						</view>
					</view>
					<view class="flex_z">
						<view class="t3" v-if="item.separate == '0'">未结算</view>
						<view class="t3" style="color: #D1D1D6;" v-if="item.separate == '1'">已结算</view>
						<view class="tt">交易：<span>￥{{item.amountOrder}}</span></view>
					</view>
				</view>
			</view>
		</view>
		<view class="kong" v-if="nolist">
			<image src="/static/okong.png" mode=""></image>
			<view class="ts">
				暂无数据
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="tit">
					数据汇总
				</view>
				<view class="item">
					<view class="text_l">结算金额</view>
					<view class="p"><span>￥</span>{{dataInfo.amount_separate}}</view>
				</view>
				<view class="item">
					<view class="text_l">订单总额</view>
					<view class="p"><span>￥</span>{{dataInfo.amount_order}}</view>
				</view>
				<view class="item">
					<view class="text_l">退款总额</view>
					<view class="p"><span>￥</span>{{dataInfo.amount_refund}}</view>
				</view>
				<view class="item">
					<view class="text_l">有效总额</view>
					<view class="p"><span>￥</span>{{dataInfo.amount_separate_no}}</view>
				</view>
				<view class="btn" @click="close">
					关闭
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		money1,
		money2,
		money3,
		separateList,
		separateData
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				safeTop: uni.getStorageSync('statusBarHeight'),
				datetimerange: ["", ""],
				money1: 0,
				money2: 0,
				money3: 0,
				params: {
					pageNum: 1,
					pageSize: 10,
					orderCreateTimeBegin: '',
					orderCreateTimeEnd: ''
				},
				List: [],
				nolist: false,
				dataInfo:{}
			};
		},
		onLoad() {
			this.datetimerange[0] = this.getDay(-7)
			this.datetimerange[1] = this.getDay(0)
			this.params.orderCreateTimeBegin = this.getDay(-7)
			this.params.orderCreateTimeEnd = this.getDay(0)
			this.getList()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			close(){
				this.$refs.popup.close()
			},
			datechange(e){
				this.params.orderCreateTimeBegin = e[0]
				this.params.orderCreateTimeEnd = e[1]
				this.params.pageNum = 1
				this.List = []
				this.getList()
				console.log(e);
				separateData(this.params).then(res=>{
					this.dataInfo =res.data
				})
			},
			getList() {
				separateList(this.params).then(res => {
					if (res.code == 200) {
						this.List.push(...res.rows)
						let total = Math.ceil(res.total / this.params.pageSize);
						this.nolist = total == 0
					}
				})
			},
			//获得当前日期
			getDay(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + "-" + tMonth + "-" + tDate;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},

			getInfo() {
				separateData(this.params).then(res=>{
					this.dataInfo =res.data
				})
				money1({}).then(res => {
					if (res.code == 200) {
						this.money1 = res.data.amount
					}
				})
				money2({}).then(res => {
					if (res.code == 200) {
						this.money2 = res.data.amount
					}
				})
				money3({}).then(res => {
					if (res.code == 200) {
						this.money3 = res.data.amount
					}
				})
			},
			gotxian() {
				uni.navigateTo({
					url: '/pages/user/txian'
				})
			},
			pagedetail(item) {
				uni.navigateTo({
					url: `/pages/user/moneydetail?id=${item.id}`
				})
			},
			openpop() {
				this.$refs.popup.open()
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.kong {
		margin: 200rpx auto;
		text-align: center;

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #D1D1D6;
			margin-top: 30rpx;
		}

		image {
			width: 278rpx;
			height: 265rpx;
		}
	}

	.block_top {
		width: 690rpx;
		background: linear-gradient(224deg, #C1FFDD 0%, #64E19D 44%, #3DAC6F 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto 0rpx;
		position: relative;
		padding: 28rpx 20rpx;
		box-sizing: border-box;

		.abs {
			position: absolute;
			width: 266rpx;
			height: 238rpx;
			right: 0rpx;
			bottom: 0rpx;
		}

		.t1_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.t2 {
				font-family: 'DINB';
				font-weight: bold;
				font-size: 60rpx;
				color: #FFFFFF;
				margin-top: 8rpx;
			}

			.btn {
				width: 172rpx;
				height: 64rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				position: absolute;
				right: 20rpx;
			}

		}

		.t3 {
			width: 330rpx;
			height: 100rpx;
			background: #ECFFF4;
			position: relative;
			border-radius: 20rpx;
			margin-top: 15rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #0CAD61;
			line-height: 100rpx;
			padding: 0rpx 24rpx;
			box-sizing: border-box;

			span {
				margin-left: 10rpx;
				font-family: 'DINB';
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.t3:after {
			content: "";
			border: 20rpx solid #ECFFF4;
			border-top-color: transparent;
			border-right-color: transparent;
			border-bottom-color: #ECFFF4;
			border-left-color: transparent;
			width: 0px;
			height: 0px;
			position: absolute;
			top: -40rpx;
			left: 70rpx;
		}
	}

	.block_sticky {
		padding: 30rpx;
		box-sizing: border-box;
		position: sticky;
		background: #FBFBFB;
		top: 0%;

		.flex_b {
			width: 100%;
		}

		.btn {
			width: 172rpx;
			height: 60rpx;
			background: #0CAD61;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60rpx;
			margin-left: 30rpx;
		}

		.price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
			margin-top: 20rpx;
		}
	}

	.ulist {
		.item {
			width: 690rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			padding: 22rpx;
			box-sizing: border-box;
			margin: 0rpx auto 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.flex_z {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.t1 {
				font-size: 28rpx;
				color: #000000;
			}

			.t2 {
				font-size: 24rpx;
				color: #979797;
			}

			.tt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #D1CDCD;

				span {
					font-family: 'DINB';
					font-size: 32rpx;
					color: #000;
				}
			}

			.t3 {
				font-size: 24rpx;
				color: #CE7034;
			}
		}
	}

	.popup {
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 42rpx 44rpx;
		box-sizing: border-box;

		.tit {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 46rpx;
			font-family: DIN, DIN;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;

			.text_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
			}

			.p {
				color: #0CAE62;

				span {
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 240rpx;
			height: 92rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 92rpx;
			margin: 50rpx auto 0rpx;
		}
	}
</style>